<!doctype html>
<html lang="zh_cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>房东辅助系统-登录</title>
    <link rel="stylesheet" type="text/css" href="../static/css/bootstrap.css">
    <script type="text/javascript" src="../static/js/jquery.min.js"></script>
    <script type="text/javascript" src="../static/js/bootstrap.bundle.js"></script>
</head>
<body>
    <div class="container d-flex justify-content-center align-items-center vh-100 bg-success">
        <div class="card shadow-md border-0 w-100 bg-success-subtle">
            <div class="card-body">
                <h4 class="card-title text-center mb-4">房东-登录</h4>
                <form class="needs-validation" novalidate>
                    <div class="mb-3">
                        <label for="mobile" class="form-label">手机号</label>
                        <input type="tel" class="form-control" id="mobile" placeholder="请输入手机号" required>
                    </div>
                    <div class="mb-3">
                        <label for="password" class="form-label">密码</label>
                        <input type="password" class="form-control" id="password" placeholder="请输入密码" required />
                    </div>
                    <a class="form-control w-100 btn btn-primary" onclick="login()" id="loginBtn">
                        登录<span id="loadingSpinner" class="spinner-border spinner-border-sm ms-1" style="display: none" role="status" aria-hidden="true"></span>
                    </a>
                </form>
                <div class="text-center mt-3 ">
                    <a href="register.html" class="btn btn-link">注册</a> <a href="tel:15210831334" class="btn btn-link">联系管理员</a>
                </div>
            </div>
        </div>
    </div>
    <!-- 错误提示框 -->
    <div class="modal fade" id="errModal" tabindex="-1" aria-labelledby="modalLab1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title fs-6 fw-bolder" id="modalLab1">错误提示</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center" id="err-body"></div>
                <div class="modal-footer p-1">
                    <button type="button" class="btn btn-sm btn-primary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    const passwordElement = document.getElementById("password");
    if (passwordElement) {
        passwordElement.addEventListener('keyup', (event) => {
            if (event.key === 'Enter') {
                // 'Enter' 是回车键的标准表示
                login();
            }
        });
    }

    function login(){
        const mobile = $('#mobile').val();
        const pwd = $('#password').val();
        if (mobile.length === 0 || pwd.length === 0) {
            $("#err-body").text("请填写完整表单");
            $("#errModal").modal('show');
            return;
        }
        // 显示加载动画
        $("#loadingSpinner").show();
        $("#loginBtn").attr("disabled", true);
        $.ajax({
            url: '/api/user/login',
            contentType:'application/json;charset=utf-8',
            type: 'POST',
            dataType: 'json',
            data: JSON.stringify({mobile: mobile, password: pwd}),
            success: function(res) {
                if (res.code === 1) {
                    $("#err-body").text(res.message);
                    $("#errModal").modal('show');
                    return;
                }
                location.href = "/page/main.html";
            },
            error: function(xhr, status, error) {
                $("#err-body").text("系统异常，请求失败:" + xhr.status);
                $("#errModal").modal('show');
            },
            complete: function() {
                // 隐藏加载动画
                $("#loadingSpinner").hide();
                $("#loginBtn").removeAttr("disabled");
            }
        });
    }
</script>
</html>